<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ page import="com.storyroad.servlet.Profile" %>
<%@ page import="com.storyroad.servlet.StoryView" %>

<%
Profile profileObject = (Profile)request.getAttribute("profileObject");
%>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

  <title>My Profile</title>

  <!-- Bootstrap core CSS -->
  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/profilepage.css" rel="stylesheet">

</head>

<body background="img/back_nologo.png">
  <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="img/logo_writing.png" id="top_logo">
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="MainPage">Home Page</a></li>
          <li><a href="Recommendations.jsp">Recommendations</a></li>
          <li><a href="Search.jsp">Search Stories</a></li>
          <li><a href="Following.jsp">Following</a></li>
        </ul>
        <ul class="nav navbar-nav" id="profile_buttons">
          <li class="active"><a href="GetProfile">My Profile</a></li>
          <li><a href="#following">Logout</a></li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar -->

  <div class="container">    
    <div class="well sidebar-nav" id="profile-page-container">
      <h2><center>My Profile</center></h2>
    </div>
    <div class="row">
      <div class="col-lg-6" id="sidebar">
        <div class="well sidebar-nav" id="profile-page-container">
          <div id = "profile-img"><img src="img/ecwc.png" alt="Profile Photo" height="100" width="100"></div>
          <div id="username"><b>
           <% out.print(profileObject.getUserName()); %>
         </b></div>
         <a href="#change">Change Profile Picture</a>
         <hr>
         <table class="table">
          <tbody>
            <tr>
              <td><b>Mail:</b></td>
              <td>
                <% out.print(profileObject.getEmail()); %>
              </td>
            </tr>
            <tr>
              <td><b>Password:</b></td>
              <td>**********</td>
              <td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Change Password
              </button></td>
            </tr>
          </tbody>
        </table>
        <hr>
      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Change Password/h4>
            </div>
            <div class="modal-body">
             <form class="form-signin" name="login_form" action="Login" method="POST">
             <input type="password" name="password" class="form-control" placeholder="Password">
              <input type="password" name="password" class="form-control" placeholder="Password">
              <input type="password" name="password" class="form-control" placeholder="Password">
              <input type="hidden" name="request_type" value="Web">
              <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="col-lg-6" id="sidebar">
      <div class="well sidebar-nav" id="profile-page-container">
        <p id="mystories-header">My Stories</p>
        <ul class="nav" id="mystories-list">
          <% for(int i=0;i<profileObject.getStories().size();i++){ 
           StoryView sView = profileObject.getStories().get(i);
           %>             
           <li id="story-header" class="active"><a href=
            "ReadStory?story_id=<% out.print(String.valueOf(sView.getS_id()).trim()); %>&request_type=Web"
            >
            <%out.print(sView.getTitle()); %>
          </a>
          <p id="tag">Ragting: <%out.print(sView.getAvgRating()); %>
            <button type="button" class="btn btn-primary btn-xs" id="edit-delete-buttons">Edit</button></p>
            <p id="tag"><%out.print(sView.getTags()); %>
              <button type="button" class="btn btn-danger btn-xs" id="edit-delete-buttons">Delete</button></p>              
            </li>
            <%} %>
          </ul>   
        </div>
      </div>
    </div>
  </div>
  <script src="bootstrap/assets/js/jquery.js"></script>
  <script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>  
</html>
